<template>
  <div class="container">
    <div class="header">
      <img src="../../static/image/bg.png" alt="">
      <div class="content">
        <div @click="tel">
          <img src="../../static/image/tel.png" alt="">
          <p class="txt">电话客服</p>
          <p class="sub-txt">400-898 8008</p>
        </div>
        <div>
          <img src="../../static/image/online.png" alt="">
          <p class="txt">在线客服</p>
          <p class="sub-txt">解决您一切所需</p>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="content">
        <ul>
          <li v-for="(item,index) in lists" @click="tab(index)" :key="index">
            <div class="item">
              <img :src="item.imgUrl" class="img">
              <p>{{item.txt}}</p>
            </div>
            <img v-if="num == index" class="list-bg" src="../../static/image/list-bg.png" alt="">
            <i class="icon" v-if="item.amount">8</i>
          </li>
        </ul>
      </div>
    </div>
    <News v-if="num==0"></News>
  </div>
</template>
<script>
import News from '@/components/systemNews'
export default {
  data() {
    return {
      lists:[
        {
          imgUrl:'../../static/image/news.png',
          txt:'系统通知',
          amount:0,
        },
        {
          imgUrl:'../../static/image/notice.png',
          txt:'平台公告',
          amount:8,
        },
        {
          imgUrl:'../../static/image/science.png',
          txt:'汽修科普',
          amount:0,
        },
      ],
      num:0,
    }
  },
  components: {
    News
  },
  methods:{
    tel() {
      wx.makePhoneCall({
        phoneNumber: '1340000'
      })
    },
    tab(e) {
      this.num = e;
      this.lists[e].amount=0;
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    .header {
      width:100%;
      height:420rpx;
      position:relative;
      overflow: hidden;
      &>img {
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
      }
      .content {
        width:100%;
        height:100%;
        position:absolute;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        align-items:center;
        &>div {
          width:50%;
          text-align:center;
          padding:20rpx 0;
          .txt {
            font-size:36rpx;
            color:#fff;
          }
          .sub-txt {
            font-size:26rpx;
            color:#F6B682;
          }
        }
        img {
          width:130rpx;
          height:130rpx;
        }
      }
    }
    .nav {
      padding-top:15rpx;
      height:170rpx;
      background-color:#F0F0F4;
      .content {
        background-color:#FAFAFA;
        ul {
          width:100%;
          height:170rpx;
          display:flex;
          flex-direction:row;
          flex-wrap: nowrap;
          align-items:center;
          li{
            width:250rpx;
            height:100%;
            position:relative;
            .list-bg,.item {
              position:absolute;
              width:100%;
              height:100%;
            }
            .item{
              z-index:10;
              text-align:center;
              font-size:30rpx;
              color:#575757;
              padding-top:10rpx;
              .img {
                width:90rpx;
                height:90rpx;
              }
            }
            .icon {
              position:absolute;
              width:36rpx;
              text-align:center;
              height:36rpx;
              line-height:36rpx;
              border-radius:50%;
              background-color:#F2281A;
              color:#fff;
              font-size:26rpx;
              left:142rpx;
              top:20rpx;
              z-index:20;
            }
          }
        }
      }
    }
  }
</style>

